<template>
  <view>
    <view
      class="wenzhangModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
      }"
    >
      <view class="info1">
        <view
          class="list1"
          v-for="(q, index, key) in list"
          :key="key"
          v-if="info.type == 1"
          @click="gourl(`/pages/community/detail?id=${q.id}`)"
          :style="{
            borderRadius: `${info.radius * 2}rpx`,
            border: `${info.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
            boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
          }"
        >
          <view class="img">
            <image :src="q.img" class="" alt="" mode="aspectFill" />
            <view class="lable flex aitems">
              <view v-if="info.label">{{ q.categoryName }}</view>
            </view>
          </view>
          <view class="listinfo">
            <view class="title">{{ q.title }}</view>
            <view class="listinfo1 flex aitems between">
              <view class="left flex aitems">
                <image
                  :src="q.userAvatar"
                  class="touxaing"
                  mode="aspectFill"
                  alt=""
                />
                <view class="name">{{ q.userNickName }}</view>
              </view>
              <view class="right">
                <view class="zan flex aitems" v-if="info.zan">
                  <image src="@/static/zan.png" class="" alt="" />
                  <view class="num">{{ q.likeNum }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="list2 flex aitems between"
          v-for="(q, index, key) in list"
          :key="key"
          v-if="info.type == 2"
          @click="gourl(`/pages/community/detail?id=${q.id}`)"
          :style="{
            borderRadius: `${info.radius * 2}px`,
            border: `${info.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
            boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
          }"
        >
          <view class="listinfo">
            <view class="title">{{ q.title }}</view>
            <view class="lable flex aitems">
              <view v-if="info.label">{{ q.categoryName }}</view>
            </view>
            <view class="listinfo1 flex aitems between">
              <view class="left flex aitems">
                <image
                  :src="q.userAvatar"
                  class="touxaing"
                  mode="aspectFill"
                  alt=""
                />
                <view class="name">{{ q.userNickName }}</view>
              </view>
              <view class="right">
                <view class="zan flex aitems" v-if="info.zan">
                  <image src="@/static/zan.png" class="" alt="" />
                  <view class="num">{{ q.likeNum }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="img">
            <image :src="q.img" class="" alt="" mode="aspectFill" />
          </view>
        </view>
        <view class="flex between aitems list3box">
          <view
            class="list3"
            v-for="(q, index, key) in list"
            :key="key"
            v-if="info.type == 3"
            @click="gourl(`/pages/community/detail?id=${q.id}`)"
            :style="{
              borderRadius: `${info.radius * 2}px`,
              border: `${info.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
              boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
            }"
          >
            <view class="img">
              <image :src="q.img" class="" alt="" mode="aspectFill" />
              <view class="lable flex aitems">
                <view v-if="info.label">{{ q.categoryName }}</view>
              </view>
            </view>
            <view class="listinfo">
              <view class="title">{{ q.title }}</view>
              <view class="listinfo1 flex aitems between">
                <view class="left flex aitems">
                  <image
                    :src="q.userAvatar"
                    class="touxaing"
                    mode="aspectFill"
                    alt=""
                  />
                  <view class="name">{{ q.userNickName }}</view>
                </view>
                <view class="right">
                  <view class="zan flex aitems" v-if="info.zan">
                    <image src="@/static/zan.png" class="" alt="" />
                    <view class="num">{{ q.likeNum }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="more flex aitems jcenter" v-if="info.more">
          <view class="flex aitems" @click="gourl(`/pages/community/index`)">
            <view>查看更多</view>
            <u-icon name="arrow-right" size="12"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { topicPushPage } from "@/servers/servers";
import colors from "@/mixins/color";
import { HTTP_STATUS } from "../../../servers/config";
import { go } from "../../../utils/wxAPI";
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
  },
  data() {
    return {
      list: [],
    };
  },
  async mounted() {
    this.topicPushPage();
  },
  activated() {
    this.topicPushPage();
  },
  methods: {
    async topicPushPage() {
      let ids = [];
      this.info.value.map((item) => {
        ids.push(item.id);
      });
      let { data } = await topicPushPage({ ids: ids.join(",") });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.list = data.data.records;
      }
    },
    gourl(url) {
      go(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.wenzhangModule {
  position: relative;
  overflow: hidden;

  .info1 {
    position: relative;
    z-index: 1;

    .list1 {
      width: 694rpx;
      margin: 24rpx auto 0;
      background: #fff;
      overflow: hidden;
      box-shadow: 0px 8rpx 40rpx 0 rgba(0, 0, 0, 0.06);

      .img {
        width: 100%;
        position: relative;

        image {
          width: 100%;
          height: 520rpx;
          object-fit: cover;
        }

        .lable {
          position: absolute;
          bottom: 20rpx;
          left: 20rpx;
          height: 32rpx;

          view {
            color: #fff;
            font-size: 20rpx;
            background: rgba(33, 33, 33, 0.5);
            padding: 0 8rpx;
            height: 32rpx;
            line-height: 32rpx;
            margin: 0 0 0 12rpx;
          }
        }
      }

      .listinfo {
        padding: 0 0 16rpx 0;

        .title {
          font-size: 28rpx;
          font-weight: bold;
          color: #212121;
          padding: 0 24rpx;
          margin-top: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .listinfo1 {
          margin-top: 16rpx;
          padding: 0 24rpx;

          .left {
            image {
              width: 28rpx;
              height: 28rpx;
              border-radius: 50%;
              object-fit: cover;
            }

            .name {
              color: #757575;
              font-size: 24rpx;
              margin-left: 12rpx;
            }
          }

          .right {
            .zan {
              image {
                width: 28rpx;
                height: 28rpx;
              }

              .num {
                color: #c4c4c4;
                margin-left: 8rpx;
                font-size: 20rpx;
              }
            }
          }
        }
      }
    }

    .list2 {
      margin: 24rpx 20rpx 0;
      background: #fff;
      overflow: hidden;
      box-shadow: 0px 8rpx 40rpx 0 rgba(0, 0, 0, 0.06);

      .img {
        width: 240rpx;
        position: relative;

        image {
          width: 100%;
          height: 180rpx;
          object-fit: cover;
        }
      }

      .listinfo {
        height: 180rpx;
        width: calc(100% - 240rpx - 20rpx);
        margin: 0 20rpx 0 0;

        // padding: 0 0 8px 0;
        .title {
          font-size: 28rpx;
          font-weight: bold;
          color: #212121;
          padding: 0 24rpx;
          margin-top: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .lable {
          // position: absolute;
          // bottom: 10px;
          // left: 10px;
          height: 32rpx;
          margin: 8rpx 12rpx 0;

          view {
            color: #757575;
            font-size: 20rpx;
            background: #f5f5f5;
            padding: 0 8rpx;
            height: 32rpx;
            line-height: 32rpx;
            margin: 0 0 0 12rpx;
          }
        }

        .listinfo1 {
          margin-top: 34rpx;
          padding: 0 24rpx;

          .left {
            image {
              width: 28rpx;
              height: 28rpx;
              border-radius: 50%;
              object-fit: cover;
            }

            .name {
              color: #757575;
              font-size: 24rpx;
              margin-left: 12rpx;
            }
          }

          .right {
            .zan {
              image {
                width: 28rpx;
                height: 32rpx;
              }

              .num {
                color: #c4c4c4;
                margin-left: 8rpx;
                font-size: 20rpx;
              }
            }
          }
        }
      }
    }

    .list3box {
      flex-wrap: wrap;
      margin: 0 30rpx 0;
    }

    .list3 {
      width: 336rpx;
      margin: 24rpx 0 0;
      background: #fff;
      overflow: hidden;
      box-shadow: 0px 8rpx 40rpx 0 rgba(0, 0, 0, 0.06);

      .img {
        width: 100%;
        position: relative;

        image {
          width: 100%;
          height: 336rpx;
          object-fit: cover;
        }

        .lable {
          position: absolute;
          bottom: 20rpx;
          left: 20rpx;
          height: 32rpx;

          view {
            color: #fff;
            font-size: 20rpx;
            background: rgba(33, 33, 33, 0.5);
            padding: 0 8rpx;
            height: 32rpx;
            line-height: 32rpx;
            margin: 0 0 0 12rpx;
          }
        }
      }

      .listinfo {
        padding: 0 0 16rpx 0;

        .title {
          font-size: 28rpx;
          font-weight: bold;
          color: #212121;
          padding: 0 24rpx;
          margin-top: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .listinfo1 {
          margin-top: 16rpx;
          padding: 0 24rpx;

          .left {
            image {
              width: 28rpx;
              height: 28rpx;
              border-radius: 50%;
              object-fit: cover;
            }

            .name {
              color: #757575;
              font-size: 24rpx;
              margin-left: 12rpx;
            }
          }

          .right {
            .zan {
              image {
                width: 28rpx;
                height: 28rpx;
              }

              .num {
                color: #c4c4c4;
                margin-left: 8rpx;
                font-size: 20rpx;
              }
            }
          }
        }
      }
    }

    .more {
      font-size: 24rpx;
      padding: 20rpx 0;
      color: #999999;
    }
  }
}
</style>
